<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>Account2Role編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.selectboxes.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselects-0.3.pack"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselects-0.3.js"></script>
	<script type="text/javascript">
	function restore() {
		var a2r = $('select[name="account2role"]');
		a2r.sortOptions(false);
		var data = '[';
		a2r.find('option').each(function() {
			if (data.length > 1) data += ',';
			data += '{"username":"' + $(this).text() + '", "userid":' + $(this).val() + '}';
		});
		data += ']';
		if (window.dialogArguments != null) {
			window.dialogArguments.reselectAccount(data);
		}
		window.opener = null;
		window.close();
	};

	function buildAccountBox(data) {
		$('td select[name="accounts"]').empty();
		$.each(data, function(i) {
			// alert(data[i].itemname);
			$('td select[name="accounts"]').addOption(
					data[i].id,
					data[i].name_tw);
		});
	};

	function buildSelectedBox(data) {
		$('td select[name="account2role"]').empty();
		$.each(data, function(i) {
			$('td select[name="account2role"]').addOption(
					data[i].id,
					data[i].name_tw);
		});
	};

	$(function() {
		$('select').addClass('blue');
		// initial non-select area
		$.ajax({
			url: '<c:out value="${ctx}"/>/ajaxRoleQueryAccount.do',
			type: 'POST',
			data: 'role_id=' + '<c:out value="${role_id}"/>',
			dataType: 'json',
			success: function(data, status){
				buildAccountBox(data);
			},
			error: function(xhrInstance, status, xhrException) {
				alert("failure:" + status);
				alert(xhrException);
			}
		});
		// initial selected area
		$.ajax({
			url: '<c:out value="${ctx}"/>/ajaxRoleQueryAccountSelected.do',
			type: 'POST',
			data: 'role_id=' + '<c:out value="${role_id}"/>',
			dataType: 'json',
			success: function(data, status){
				buildSelectedBox(data);
			},
			error: function(xhrInstance, status, xhrException) {
				alert("failure:" + status);
				alert(xhrException);
			}
		});
		// (OPTIONAL) adjust the width of the select box to the bigger of the two
		$("select[name='accounts']").selectAdjustWidth("select[name='account2role']");

		$("select[name='accounts']").multiSelect("select[name='account2role']", {
			trigger: "input[name='remove']",
			triggerAll: "input[name='removeAll']"
			});

		$("select[name='account2role']").multiSelect("select[name='accounts']", {
			trigger: "input[name='add']",
			triggerAll: "input[name='addAll']"
			});
	});
	</script>
</head>
<body>
<input type='text' name='role_id' value='<c:out value="${role_id}"/>'/>
<form action="">
<table id="Rolesframe1" >

<tr>
	<th height="51" colspan="3" class="th" >編輯區     </th>
</tr>
<tr>
	<td width="45%" height="172" rowspan="2" class="leftblock"><p>待選帳號</p>
	<html:select property="accounts" name="lazyForm" size="10" multiple="multiple" />
    <p></p>
    </td>
    <td width="10%" class="butblock" >
    <table class="buttonblock" width="100%" >
   			 <tr><td height="27"> <input name="removeAll" type="button" class="button removeAllButton" value="&gt;&gt;" title="Remove all"></td></tr>
             <tr><td height="27"> <input name="remove" type="button" class="button removeButton" value="&gt;" title="Choose selected and remove"></td></tr>
             <tr><td height="27"> <input name="add"    type="button" class="button addButton"    value="&lt;" title="Choose available and add" /></td></tr>
             <tr><td height="27"> <input name="addAll" type="button" class="button addAllButton" value="&lt;&lt;" title="Add all"></td></tr>
            </table><p></p></td>
    <td width="45%" rowspan="2" class="rightblock"><p >已選帳號</p>
	<html:select property="account2role" name="lazyForm" size="10" multiple="multiple" />
	<p></p>
	</td>
	</tr>

  </table>  <p></p>
	<div id="sendset">
    <input type="submit" name="button" id="button" value="返回" onclick="restore()" />
    <input type="submit" name="button2" id="button2" value="關閉" onclick="window.close()" />
    </div>

</form>
</body>
</html:html>